<script>
import arrayUtils from "@/utils/arrayUtils"
import request from "@/utils/request"
import { getShowImage } from "@/utils"

export default {
  name: "appList",
  created() {
    request({
      url: "homeFunction/listFunction",
      method: "post",
      data: {
        size: -1,
        current: 1,
      },
      errorHandle: true,
      showLoading: true,
    }).then((res) => {
      this.appList = res.records
    })
  },
  data() {
    return {
      appList: [],
    }
  },
  computed: {
    appListRender() {
      return arrayUtils.toTwoDimensionalArray(this.appList, 5)
    },
  },
  methods: {
    getShowImage,
    appItemClick(item) {
      //无跳转逻辑
      if (!item.jumpType || item.jumpType === "NONE") return
      //跳转到小程序
      if (item.jumpType === "Applet" && item.appid) {
        uni.navigateToMiniProgram({
          appId: item.appid,
          path: item.jumpPath,
        })
        return
      }
      //跳转站内页面
      if (item.jumpType === "Instation" && item.jumpPath) {
        uni.navigateTo({
          url: item.jumpPath,
        })
        uni.switchTab({
          url: item.jumpPath,
        })
        return
      }
      //跳转h5页面
      if (item.jumpType === "H5" && item.jumpPath) {
        uni.navigateTo({
          url: "/pages/web-view/web-view?path=" + encodeURIComponent(item.jumpPath),
        })
        return
      }
    },
  },
}
</script>

<template>
  <view class="app-list" v-if="appListRender.length > 0">
    <swiper
      style="width: 100%"
      :indicator-dots="appListRender.length > 1"
      :style="{ height: appListRender.length > 1 ? '190rpx' : '150rpx' }"
    >
      <swiper-item v-for="(array, index) in appListRender" :key="index">
        <view class="app-list-wrapper">
          <view class="app-item" v-for="item in array" :key="item.id" @click="() => appItemClick(item)">
            <image :src="getShowImage(item.imagePath)" class="icon"></image>
            <view class="title">{{ item.title }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
.app-list {
  .app-list-wrapper {
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    .app-item {
      width: 20%;
      padding: 0 5rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;

      > .icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
      }

      > .title {
        color: var(--text-color);
        font-size: 30rpx;
        width: 100%;
        text-align: center;
        //溢出自动加省略号
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
